@keyframes imgInfo {
 from {
  left: 0;
  transform: rotate(0deg);
 }

 to {
  left: -60px;
  transform: rotate(-90deg);
 }
}
@keyframes imgInfoOut {
 form {
  left: -60px;
  transform: rotate(-90deg);
 }
 to {
  left: 0;
  transform: rotate(0deg);
 }
}

.user_box {
 padding: 20px;
 width: 100%;
 max-height: 172px;
 display: flex;
 align-items: center;
 flex-direction: column;

 .user_log {
  width: 60px;
  height: 60px;
  border: 2px solid #fff;
  border-radius: 100%;
  background-color: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  .user_img {
   position: absolute;
   color: #fff;
   width: 100%;
   height: 100%;
   border-radius: 100%;
   text-align: center;
   z-index: 99;
  }

  .out_btn {
   font-size: 12px;
   z-index: 98;
  }
 }

 .user_log:hover {
  .user_img {
   animation: imgInfo 0.5s;
   -webkit-animation: imgInfo 0.5s;
   animation-fill-mode: forwards;
  }
 }

 .user_signature {
  width: 100%;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  span {
   color: #fff;
   font-size: 12px;
  }
 }
}
